/**	
 @ author: liduanjie
 * the component will be extend later.
 * this componet is bese used for mobile
 * because of some reason , the reset style will be add on later
 * the coponent is useful for extend , like 'cusdivider, bg-format-auto'
 * the next version will use sass.
 * weakness of this component is lack of js, just a layout ui.
 */

/*comp0*/

 nav {
	background-color: #fff;
}

nav .store-item {
	padding: 10px;
}

nav .store-item > span {
	display: block;
	color: #999;
}

nav .store-item > a {
	display: block;
}

nav .store-item > span {
	font-size: 12px;
}

nav .store-item > a > img{
	border-radius:50%;
	width:40px;
	height:40px;
}

/*comp0*/


/*comp1*/

.component-1 {
	background-color: #fff;
	/*margin-bottom: 9px;*/
}

.component-1 .comp1-size1 {
	height: 90px;
	width: 100%;
	display:block
}

.component-1 .comp1-r {
	border-right: 1px solid #eee;
	/*height: 188px;*/
	height: 180px;
}

.component-1 .comp1-r > a {
	display:block;
	height:100%;
}

/*comp1*/


/*comp2*/

.component-2 {
	background-color: #fff;
	border:1px solid #eee;
	border-left: 0px;
	border-right: 0px;
	/*margin-bottom: 9px;*/
}

.component-2 .comp2-r {
	/*height: 188px;*/
	height: 180px;
}

.component-2 .comp2-r > a {
	height:100%;
	display:block;
}

.component-2 .comp2-size1 {
	height:90px;
	display:block
}
/*comp2*/


/*comp3*/

.component-3 {
}

.component-3 .comp3-item {
	background-color:#fff;
	padding: 2px;
	margin-bottom: 2px;
}

.component-3 .comp3-item > a {
	height: 160px;
	display:block;
}

.component-3 > div > div:nth-child(odd) .comp3-item{
	margin-right: 1px;
}

.component-3 > div > div:nth-child(even) .comp3-item{
	margin-left: 1px;
}

.component-3 .comp3-item .intro {
	font-size: 14px;
	color: #bbb;
	padding:10px;
	display:block;
}

.component-3 .comp3-item .intro > .title {
	display: block;
	color: #000;
    height: 28px;
    line-height: 14px;
    overflow: hidden;
    margin-bottom: 3px;
    font-size: 12px;
    letter-spacing: 1px;
    
    /*height: 14px;
    line-height: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;*/
}

.component-3 .comp3-item .intro > .info {
	position:relative;
	display: block;
	color: #cc0000;
	font-size: 12px;
}

.comp3-item .intro > .info > span > em {
	font-style: normal;
	font-size: 16px;
	/*font-size: 2em;*/
	font-weight: bold;
}

.comp3-item .intro > .info > a{
	color: #cc0000;
}

.comp3-item .intro > .info > a > i {
	font-size:22px;
}

/*comp3*/


/*comp4*/

.component-4 {

}

.component-4 .comp4-size1 {
	display:block;
	height:140px;
}

.component-4 .comp4 {
	background-color: #fff;
}

.component-4 .comp4 > div > div > div {
	border-right: 1px solid #eee;
}
/*comp4*/


/*comp5*/

.component-5 {
	background-color: #fff;
}

.component-5 .comp5-size1 {
	display:block;
	height:140px;
}

.component-5  > div {
	/*border-bottom: 1px solid #eee;*/
}

.component-5 > div > div > div > div {
	border-right: 1px solid #eee;
}

/*comp5*/

/*comp6*/

.component-6 {
	background-color: #fff;
}

.component-6 .comp6-size1 {
	display:block;
	height:180px;
}
/*comp6*/


/*title divider */
	
.component-divider {
	height:40px;
	display:block;
	margin-bottom:9px;
	line-height:40px;
	text-align:center;
	position: relative;
}

.component-divider > .line1{
	display: inline-block;
	border-bottom: 1px solid #999;
	/*width: 40px;*/
	width: 3.8rem;
	margin-bottom: 3px;
}

.component-divider > img {
	width:100px;
	height:30px;
	vertical-align:middle;
}

.component-divider > .text-r {
	position:absolute;
	right: 10px;
	top: 0px;
	font-size: 12px;
	text-decoration: none;
	color: #5D656B;
	padding-top: 2px;
}

.component-divider > .text-r > span {
	margin-right: 3px;
}

.component-divider > .text-r > i {
	color: orange;
	font-size: 16px;
	line-height: 12px;
}

/*title divider 


/*footer*/
	
	footer {
		background-color: #f0f0f0;
		padding: 5px 0;
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
		position: fixed;
		width: 100%;
		bottom: 0px;
	}

	footer .orange {
		color: #f60!important;
	}

	footer .foot-con {
		display:block;
		text-align:center;
    	color: #5D656B;
    	text-decoration: none;
	}

	footer .foot-con > .icon {
		/*width: 40px; */
		/*height: 40px;*/
		margin-bottom: 3px;
		display:block;
	}

	footer .foot-con > .icon > i {
    	font-size: 25px;
    }

	/*footer > div > div > div > a > img {
		border-radius: 50%; 
		width: 40px; 
		height: 40px;
	}*/

	footer .foot-con > .text {
		display: block;
		font-size: 12px;
	}

/*footer*/
